<template>
    <h3>vue工程化项目的特殊文件模块</h3>
    <pre class="note">
        vue工程环境提供了多种 -loader 加载器，让项目开发中常用的类型文件都可以作为vue项目模块文件进行加载
        ● js文件
            => imports-loader 完成全局装置无模块功能的JS文件
        ● vue文件 vue-loader
        ● css文件 css-loader 
            => 实现以JS模块规则加载的样式,样式文件中的相关样式代码会作为全局样式被加载
            => imports-loader 提供了一个特殊的静态资源加载规则，对于无返回值的文件模块，可以直接跳过变量定义规则
            => 实际项目开发时，会在main.js中完成全局样式文件的载入操作
        ● 图片、视频、音频 imports-loader
            => 实现JS加载图片、视频、音频等静态资源，将静态资源作为模块进行定义和使用
            => 完成静态资源加载时，静态资源文件返回的文件路径进行hash编码，同时会进行路径转换
            => 完成静态资源路径编码时，基于vue内置的判断和计算会选择将部分图片转换为BASE64编码进行加载
            => 路径完成编码后，对应的文件会基于编码名称重新复制到public服务器目录的img目录下
            => 因为src以内的文件在加载静态资源后，都会完成路径名称的编码和复制操作，所以项目中的静态资源都存放于src以内
            => vue的工程化项目中的src目录内提供一个可用 @/ 路径别名，该别名恒定指向于src/ 目录
    </pre>
    <img :src="img" style="width:100px;height: 100px;display: block;">
    <img src="../../assets/logo.png" style="width:100px;height: 100px;display: block;">
    <img src="@/assets/logo.png" style="width:100px;height: 100px;display: block;">
    <img src="../../../public/img/2.jpg" style="width:100px;height: 100px;display: block;">
</template>

<script>
// import a from "../../assets/css/test.css"
// console.log(a);
// import a from "../../assets/css/test.css"
import "../../assets/css/test.css"
import img from "../../assets/1.jpg";
console.log(img)

export default {
    data() {
        return {
            img: img
        }
    },
}
</script>

<style>
/* css 语法加载的样式文件 */
/* @import url("../../assets/css/test.css"); */
</style>